<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=640 , user-scalable=no">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        .box{ width: 300px; height: 300px; border: 1px solid #000; border-radius: 50%; position: relative; margin:100px auto;}
        .circle{ width: 60px; height: 60px; border-radius: 50%; background-color: #000; position: absolute; left:120px; top:120px;}
        .little{ width: 10px; height: 10px; border-radius: 50%; background-color: red; position: absolute; left:145px; top:145px;}
        .progress{ width:10px; height:280px; background-color: #e5e5e5; position: relative; margin:0 auto; border-radius: 5px 5px 5px 5px; }
        .progress-circle{ position: absolute; left:-15px; bottom:0; width:40px; height:40px; border-radius: 50%; background-color: #f90; z-index: 1; box-shadow: 1px 1px 10px #333;}
        .progress-strip{ width: 100%; height:0; position: absolute; left:0; bottom:0; background-color: #666; border-radius: 0 0 5px 5px;}
    </style>
</head>
<body>
    
    <div class="box">
        <span class="little"></span>
        <div class="circle"></div>
    </div>
    <div class="progress">
        <div class="progress-strip"></div>
        <div class="progress-circle"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var x0 = $('.circle').offset().left-$('.box').offset().left-1;
        var y0 = $('.circle').offset().top-$('.box').offset().top-1;
        var schedule = 0;
        $('.circle').bind('touchmove',function(e){
            e.preventDefault();
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var x = touch.pageX - $('.box').offset().left-$(this).width()/2-1;
            var y = touch.pageY - $('.box').offset().top-$(this).height()/2-1;
            if(outSide(touch.pageX,touch.pageY)){
                x = location(touch.pageX,touch.pageY).x - $('.box').offset().left-$(this).width()/2-1;
                y = location(touch.pageX,touch.pageY).y - $('.box').offset().top-$(this).height()/2-1;
            }
            $(this).css('left', x+'px');
            $(this).css('top', y+'px');
            var angle = location(touch.pageX,touch.pageY).angle;
            var a = location(touch.pageX,touch.pageY).a;
            console.log(a,angle);
        });
        $('.circle').bind('touchend',function(e){
            $(this).animate({"left":x0 + "px","top":y0 + "px"}, 500);
        });
        $('.progress').bind('touchstart',function(e){
            e.preventDefault();
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            // var disX = touch.pageX - $('.progress-strip').offset().left;
            var disY = $('.progress').height() - (touch.pageY - $('.progress').offset().top) - $('.progress-circle').height()/2;
            console.log(disY);
            if(disY <= 0){
                disY = 0;
            }else if(disY >= ($('.progress').height()-$('.progress-circle').height())){
                disY = $('.progress').height()-$('.progress-circle').height();
            }
            $('.progress-strip').css({'height':disY + 'px',});
            $('.progress-circle').css({'bottom':disY + 'px',});
            schedule = parseInt(disY/($('.progress').height()-$('.progress-circle').height())*100) + '%';
            console.log(schedule);
        });
        $('.progress-circle').bind('touchmove',function(e){
            e.preventDefault();
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var disY = $('.progress').height() - (touch.pageY - $('.progress').offset().top) - $('.progress-circle').height()/2;
            if(disY <= 0){
                disY = 0;
            }else if(disY >= ($('.progress').height()-$('.progress-circle').height())){
                disY = $('.progress').height()-$('.progress-circle').height();
            }
            $('.progress-strip').css({'height':disY + 'px',});
            $('.progress-circle').css({'bottom':disY + 'px',})
            schedule = parseInt(disY/($('.progress').height()-$('.progress-circle').height())*100) + '%';
            console.log(schedule);
        });
        /*document.addEventListener('touchstart',function(e){
                var touch = e.changedTouches[0];
                var oMinValue = getAngle(200,200,parseInt(touch.pageX),parseInt(touch.pageY))
                console.log(oMinValue*180/Math.PI+90);
                toDraw(oMinValue)
            });
            document.addEventListener('touchmove',function(e){
                var touch = e.changedTouches[0];  //当前手指，可以先输出e，看下结构
                var value = getAngle(200,200,parseInt(touch.pageX),parseInt(touch.pageY))
                console.log(value*180/Math.PI+90);
                toDraw(value);
            });
            document.addEventListener('touchend',function(e){
                var touch = e.changedTouches[0];
                var value = getAngle(200,200,parseInt(touch.pageX),parseInt(touch.pageY));
                toDraw(value);
            });*/
        function location(px,py){
            var mx = $('.box').offset().left + $('.box').outerWidth()/2;
            var my = $('.box').offset().top + $('.box').outerHeight()/2;
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var sin = (px-mx)/Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = (py-my)/Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var r = $('.box').outerWidth()/2- $('.circle').outerWidth()/2;
            var a = 0;
            if(py== my){
                a = 0;
            }else{
                a = (my-py)/Math.abs(py-my);
            }
            return {
                'x': r*sin+mx,
                'y': r*cos+my,
                'angle': getAngle(px,py,mx,my),
                'a':a
            }
        }
        function outSide(px,py){
            var mx = $('.box').offset().left + $('.box').outerWidth()/2;
            var my = $('.box').offset().top + $('.box').outerHeight()/2;
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            if(z >= ($('.box').outerWidth()/2- $('.circle').outerWidth()/2)){
                return true;
            }else{
                return false;
            }
        }
        function getAngle(px,py,mx,my){//获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = y/z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

            if(mx>px&&my>py){//鼠标在第四象限
                angle = 180 - angle;
            }

            if(mx==px&&my>py){//鼠标在y轴负方向上
                angle = 180;
            }

            if(mx>px&&my==py){//鼠标在x轴正方向上
                angle = 90;
            }

            if(mx<px&&my>py){//鼠标在第三象限
                angle = 180+angle;
            }

            if(mx<px&&my==py){//鼠标在x轴负方向
                angle = 270;
            }

            if(mx<px&&my<py){//鼠标在第二象限
                angle = 360 - angle;
            }
            angle = angle + 180;
            if(angle>= 360){
                angle = angle - 360;
            }

                return angle;
        }
    }
</script>